<template>
    <div class="nav">
        <div class="scroll-wrapper">
            <div 
            v-for="(item, index) in innerData"
            :key="index"
            class="list-item"
            v-czc="['首页', '点击按钮', '导航', 0, 'home-btn-nav']"
            >
                <title-parent 
                :data="item"
                >
                    <template 
                    v-slot:search="{hide}" 
                    v-if="item.slot && item.slot.search"
                    >
                        <component
                            :is="item.slot.search"
                            :data="item"
                            @close="hide"
                        ></component>
                    </template>
                </title-parent>

                <el-collapse-transition>
                    <div 
                    v-if="item.expand && item.children && item.children.length"
                    class="list-children"
                    >
                        <div 
                        v-for="(child, i) in item.children"
                        :key="i"
                        class="title-child"
                        :class="{active: checkIsActive(child)}"
                        @click="childItemClick(child, item)"
                        >

                            <div class="text">
                                {{child.title}}
                            </div>
                        </div>
                    </div>
                </el-collapse-transition>
            </div>
        </div>

        <modal-poster ref="poster"></modal-poster>
    </div>
</template>

<script>
import TitleParent from './title-parent.vue';

import ModalPoster from '@/components/sys/modal-poster.vue';
import searchAutocompleteNav from '../../nav/components/search-autocomplete-nav.vue';

export default {
    components: {
        TitleParent,
        ModalPoster,
    },
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        props: {
            type: Object,
            default: () => ({
                title: 'title',
                icon: 'imgurl',
            }),
        },
        active: {
            type: [String, Boolean],
            default: false,
        },
    },
    data() {
        return {
            innerData: [],
        };
    },
    watch: {
        data: {
            handler(val) {
                this.innerData = [
                    {
                        title: '我的桌面',
                        imgurl: '/images/home/zhuomian.png',
                        imgurl1: '/images/home/zhuomian-a.png',
                        link: '/home/desktop'
                    },
                    {
                        title: '网站导航',
                        imgurl: '/images/home/changyong.png',
                        imgurl1: '/images/home/changyong-a.png',
                        expand: true,
                        search: true,
                        slot: {
                            search: searchAutocompleteNav,
                        },
                        children: [
                            ...val,
                        ],
                    },
                ]
            },
            immediate: true,
        },
    },
    methods: {
        checkIsActive(item) {
            var {link, title} = item;

            if (!link) {
                return false;
            }

            if (this.active) {
                // 通过参数判断
                return this.active === title;
            }

            // 通过地址判断
            var {fullPath, path} = this.$route,
                fullPath = decodeURIComponent(fullPath);

            if (/\?/.test(link)) {
                return fullPath === link;
            }

            var reg = new RegExp(link);

            return (
                path === link 
                && reg.test(fullPath)
            );
        },

        /**
         * 父导航项被点击
         */
        parentClickHandler(item) {
            var {link, children} = item;

            if (children) {
                item.expand = !item.expand;
                // 父级导航点击
                return;
            }

            if (!link) {

                return;
            }

            this.goto(link);
        },

        /**
         * 子导航项被点击
         */
        childItemClick(item, parent) {
            var {link, open, onclick} = item,
                {open: parentOpen} = parent;

            if (onclick) {
                // console.log(onclick)
                onclick(item, parent);
                return;
            }

            this.setCzc(['导航栏', '点击', item.title, 0, `home-nav-click-${item.title}`]);

            if (!link) {
                showMsgBox('敬请期待');

                return;
            }

            if (open || parentOpen) {
                window.open(link);
                return;
            }

            this.goto(link);
        },
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';

    .nav {
        width: 100%;
        max-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background: white;
        font-size: 13px;
        scrollbar-width: none; /* firefox */
        -ms-overflow-style: none; /* IE 10+ */

        &::-webkit-scrollbar {
            display: none;
        }

        .scroll-wrapper {
            padding: 6px 15px;

            .list-item{
                .title-parent {
                    display: flex;
                    align-items: center;
                    padding: 8px 0;
                    padding-left: 12px;
                    cursor: pointer;
                    font-weight: bold;
                    color: #2b2b2b;

                    .icon{
                        margin-right: 6px;

                        img{
                            display: block;
                            width: 21px;
                            height: 21px;
                        }
                    }

                    .text{
                        flex: 1;
                        font-size: 15px;
                        line-height: 1em;
                    }

                    .search{
                        display: flex;
                        align-items: center;
                    }

                    .arrow{
                        display: flex;
                        align-items: center;
                        padding: 0 6px;
                        transition: all .3s;
                    }

                    &:hover, &.active{
                        background: $primaryColor;
                        color: white;

                        .icon{
                            img{
                                opacity: 0;
                            }
                        }
                    }

                    &.expand{
                        .arrow{
                            transform: rotate(180deg);
                        }
                    }

                    &.group-start{
                        margin-top: 24px;
                    }
                }

                .list-children{
                    padding-left: 26px;

                    .title-child{
                        padding: 8px 10px;
                        cursor: pointer;
                        color: #656565;

                        .text{
                            line-height: 1em;
                        }

                        &:hover{
                            font-weight: bold;
                            background: #d7e0ff;
                        }

                        &.active{
                            color: #222222;
                            font-weight: bold;
                            background: #d7e0ff;
                        }
                    }
                }
            }
        }
    }
</style>
